<template>
  <div class="flex flex-col page-box">
    <div class="search flex">
      <div class="flex items-center justify-center">
        <span class="shrink-0">船队</span>
        <el-input v-model="input" placeholder="请输入" style="width: 240px" class="ml-2" />
        <el-button type="primary" class="ml-2">查询</el-button>
      </div>
    </div>
    <div class="flex-1 pt-4">
      <el-timeline style="max-width: 600px">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :hollow="true"
          :timestamp="activity.timestamp"
          placement="top"
        >
          <el-card>
            <p>{{ activity.content }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>
<script setup lang="ts">
const input = ref('')
const activities = [
  {
    content:
      'Further to the above kindly revert with complete quotation of the communication provided services in order to submit to vessels owners for final approval',
    timestamp: '11月24日 01:50'
  },
  {
    content:
      '附件请查收贵轮接船期间供船的接船日志，为当时邮寄船厂签收，因船章未供船没有回传加盖船章的签收单，烦请帮忙补盖一份服务商开票用，谢谢！',
    timestamp: '11月23日 09:50'
  },
  {
    content:
      '收到以下邮件，我这边没有问题。要注意烟囱上面露出的管路部分要做成一样的黑色，参考见附件类似照片。',
    timestamp: '11月23日 07:50'
  },
  {
    content:
      'Confirm following invoice from BV for Hull Occasional Survey of GOLDEN JASMINE, total amount is 3623,00USDThanks and best regards',
    timestamp: '11月22日 10:50'
  },
  {
    content:
      'Attached kindly find the invoice from BV for Hull Occasional Survey of GOLDEN JASMINE, total amount is 3623,00USD. Please check and give your good advice.',
    timestamp: '11月21日 10:50'
  },
  {
    content:
      'Further to the above kindly revert with complete quotation of the communication provided services in order to submit to vessels owners for final approval However pls note that the vessel will not use FBB for communication as we intend to have Starlink and V-SAT as a back',
    timestamp: '11月20日 10:50'
  }
]
</script>
<style lang="scss" scoped>
.page-box {
  background: #ffffff;
  box-shadow: 0px 8px 20px 0px rgba(134, 154, 183, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
  :deep(.el-timeline-item__tail) {
    border-style: dotted;
  }
}
</style>
